<script lang="ts" setup>
import { Common } from '~/common'

interface ListItem {
  title: string
  action: () => void
}

const props = withDefaults(defineProps<{
  list: ListItem[]
  rows?: number
  bg?: string
  fg?: string
  autoColor?: boolean
}>(), {
  rows: 2,
  autoColor: false,
  bg: 'white',
  fg: 'black',
  // fg: 'black',
})

const getColor = Common.randomColor

function bgColor(item: ListItem) {
  return props.autoColor ? getColor(item.title) : props.bg
}

function fgColor(_item: ListItem) {
  return props.autoColor ? '#fff' : props.fg
}
</script>

<template>
  <div
    :style="{ height: `${rows * 20.75 * 0.25}rem` }"
    mb h-41.5 w-full of-scroll text-size-3.5
  >
    <div
      h-full flex flex-col flex-wrap
      style="align-content:start; white-space: pre"
    >
      <div
        v-for="(item, index) in list"
        :key="index"
        mb1 mr1 paper h-19.75 w-28 flex-shrink-0 of-hidden p2 c-white
        :style="{
          backgroundColor: bgColor(item),
          color: fgColor(item),
        }"
        @click="item.action"
      >
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
